<template>
  <view class="page-wrapper">
    <view class="main">
      <view class="left">
        <view
          class="item1"
          @click="changeTab(index)"
          v-for="(item, index) in list"
          :key="item.cat_id"
          >L1层{{ index }}{{ item.cat_name }}</view
        >
      </view>

      <view class="right">
        当前激活项 {{ currentIndex }}
        <view
          class="item2"
          v-for="item2 in list[currentIndex].children"
          :key="item2.cat_id"
        >
          --------------------- L2层{{ item2.cat_name }}
          <view class="list">
            <view
              class="item3"
              v-for="item3 in item2.children"
              :key="item3.cat_id"
            >
              L3层{{ item3.cat_name }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    // 未优化
    data() {
      return {
        // 当前激活索引
        currentIndex: 0,
        // 全部分类列表
        list: [
          {
            name: "大家电",
            children: [
              {
                name: "电视",
                children: [{ name: "小米电视" }],
              },
            ],
          },
          {
            name: "数码3C",
            children: [
              {
                name: "手机",
                children: [
                  {
                    name: "华为",
                  },
                  {
                    name: "小米",
                  },
                ],
              },
              {
                name: "平板",
              },
              {
                name: "电脑",
              },
            ],
          },
        ],
      };
    },
    onLoad() {
      this.loadPage();
    },
    methods: {
      async loadPage() {
        this.list = await uni.$u.http.get("/categories");
        console.log("list---------");
        console.log(this.list);
      },
      changeTab(index) {
        this.currentIndex = index;
        // 拿到右侧二级分类数据
        console.log("右侧二级分类数据", this.list[this.currentIndex].children);
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 页面总容器
  .page-wrapper {
    // 高度满页, 内部内容纵向 flex 排列
    height: 100vh;
    display: flex;
    flex-direction: column;
    .main {
      // 主要内容占据除搜索剩余高度, 内部内容 flex 横向布局
      flex: 1;
      display: flex;
      // 限制主要内容盒子滚动
      // 左右两侧单独开放
      overflow: hidden;
      .left {
        width: 182rpx;
        overflow: auto;
        background-color: #f3f3f3;
        .item1 {
          padding: 18rpx 0;
          font-size: 28rpx;
          color: #585858;
          text-align: center;
          .current {
            color: #ea4350;
            border-left: 4rpx solid #ea4350;
            border-right: 4rpx solid transparent;
            font-weight: bold;
          }
        }
      }
      .right {
        // 占据除左侧以外的剩余宽度
        font-size: 26rpx;
        flex: 1;
        overflow: auto;
        .item2 {
          color: brown;
          // 二级分类
          .second-title {
            font-size: 26rpx;
            color: #575757;
            text-align: center;
            margin: 40rpx 0;
          }
          .list {
            display: flex;
            flex-wrap: wrap;
            .item3 {
              width: 33.3%;
              text-align: center;
              color: darkblue;
              .img {
                width: 120rpx;
                height: 120rpx;
              }
              .name {
                font-size: 21rpx;
                color: #2e2e2e;
              }
            }
          }
        }
      }
    }
  }
</style>